T
<template>
   <div class="container">
     <!-- 导航 -->
   <div class="NumBar">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="活动名称">
            <el-input v-model="formInline.user" placeholder="活动名称"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="未开始" value="shanghai"></el-option>
              <el-option label="进行中" value="beijing"></el-option>
              <el-option label="已结束" value="shanghai"></el-option>
              <el-option label="已失效" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">新建</el-button>
            <el-button  @click="onSubmit">清空条件</el-button>
          </el-form-item>
        </el-form>
   </div>

<!-- 全选反选 -->
<div class="cheacked">
   <span class="el-icon-info"></span>
   <span>已选择 4 项</span>
   <span>删除</span>
   <span>取消</span>
</div>

<div class="table">
   <el-table
    :data="tableData"
    style="width: 100%">
     <el-table-column
      prop="name"
      label="编号"
      width="210">
    </el-table-column>
     <el-table-column
      prop="name"
      label="名称"
      width="210">
    </el-table-column>
     <el-table-column
      prop="name"
      label="活动类型"
      width="210">
    </el-table-column>
    <el-table-column
      prop="date"
      label="活动时间"
      sortable
      width="210"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
    <el-table-column
      prop="date"
      label="结束时间"
      sortable
      width="210"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="备注"
      width="210">
    </el-table-column>
    <el-table-column
      prop="address"
      label="状态"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="操作"
      width="210"
      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
<div class="block">

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
  </el-table>

</div>
   </div>
</template>
<script>
export default {
  data() {
    return {
      //全选反选
      checked: true,
      //分页
      currentPage4: 4,
      formInline: {
        user: "",
        region: ""
      }
    };
  },
  methods: {
    //  搜索
    onSubmit() {
      console.log("submit!");
    },
    // 增加
    handleCreate() {},
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>
<style lang=""scope>
@import "../../style/MarketingList/campaigh.less";
</style>
